import React, { Component, createElement } from 'react';
import { Comment, Tooltip, Avatar } from 'antd';
import moment from 'moment';
import { Link } from "react-router-dom";

import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled,MessageFilled,MessageOutlined } from '@ant-design/icons';
import { WhiteSpace, NavBar, Icon, WingBlank } from 'antd-mobile';
export default class Follow extends Component {
    constructor(props) {
        super(props)
        this.state = {
            likes: 0,
            dislikes: 0,
            action: null
        }
    }
    like = () => {
        this.setState({
            likes: 1,
            dislikes: 0,
            action: 'liked'
        })

    };

    dislike = () => {
        this.setState({
            likes: 0,
            dislikes: 1,
            action: 'disliked'
        })
    };
    render() {
        let action = this.state.action
        let likes = this.state.likes
        let dislikes = this.state.dislikes

        const actions = [
            <span key="comment-basic-like">
                <Tooltip title="Like">
                    {createElement(action === 'liked' ? LikeFilled : LikeOutlined, {
                        onClick: this.like,
                    })}
                </Tooltip>
                <span className="comment-action">{likes}</span>
            </span>,
            <span key=' key="comment-basic-dislike"'>
                <Tooltip title="Dislike">
                    {React.createElement(action === 'disliked' ? MessageFilled : MessageOutlined, {
                        onClick: this.dislike,
                    })}
                    <span className="comment-action">回复</span>

                </Tooltip>
            </span>

        ];
        return (
            <div>
                <WingBlank>
                    <Comment
                        actions={actions}
                        author={<a>Han Solo</a>}
                        avatar={
                            <Avatar
                                src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
                                alt="Han Solo"
                            />
                        }
                        content={
                            <div style={{ color: '#141414' }}>
                                回复 <span style={{ color:'#108ee9'}}>顶顶顶</span> : We supply a series of design principles
                            </div>
                        }
                        datetime={
                            <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
                                <span>{moment().fromNow()}</span>
                            </Tooltip>
                        }
                    />
                </WingBlank>
            </div>
        );
    }
}
